<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>智能金库外币管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Loading Bootstrap -->
    <link href="../../css/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Loading Flat UI -->
    <link href="../../css/flat-ui.css" rel="stylesheet">
    <link href="../../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

    <link rel="shortcut icon" href="../../img/favicon.ico">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="../dist/js/vendor/html5shiv.js"></script>
      <script src="../dist/js/vendor/respond.min.js"></script>
    <![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
  body,td,th {
	font-family: "微软雅黑";
}
body {
	//background-color: #3f5ca2;
}
  </style>
  </head>
<body>
    <div class="container">
      <nav class="navbar navbar-default" role="navigation" style="margin-bottom: 10px;">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
              <span class="sr-only">Toggle navigation</span>
            </button>
            <a class="navbar-brand" href="#">智能金库外币管理系统</a>
          </div>
          <div class="collapse navbar-collapse" id="navbar-collapse-01">
            <ul class="nav navbar-nav">
              <li class="active" style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    基础数据 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">数据字典</a></li>
                    <li><a href="../base/org.html">机构管理</a></li>
                  </ul>
                </div>
              </li>
              <li style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    用户管理 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">用户管理</a></li>
                    <li><a href="#">角色管理</a></li>
                    <li><a href="#">权限管理</a></li>
                  </ul>
                </div>
              </li>
              <li style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    外币管理 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="../currency/request.html">需求管理</a></li>
                    <li><a href="../currency/storage.html">入库管理</a></li>
                    <li><a href="../stock/stock.html">库存管理</a></li>
                    <li><a href="../currency/request.html">出库管理</a></li>
                  </ul>
                </div>
              </li>
              <li style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    核账管理 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="../currency/request.html">核账</a></li>
                    <li><a href="../currency/storage.html">核账结果</a></li>
                  </ul>
                </div>
              </li>
              <li style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    指令管理 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="../comand/command_requests.html">指令列表</a></li>
                  </ul>
                </div>
              </li>
              <li style="padding-right: 10px;">
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    设备监控 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="../monitor/monitor.html">设备监控</a></li>
                    <li><a href="#">监控日志</a></li>
                  </ul>
                </div>
              </li>
              <li>
                <div class="btn-group" style="padding-top: 7px;">
                  <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" style="padding-left: 10px;padding-right: 10px;padding-top: 7px;padding-bottom: 7px;">
                    报表管理 <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="../report/use.html">年度币种使用量报表</a></li>
                    <li><a href="../report/use_detail.html">月度库存使用对比表</a></li>
                    <li><a href="../report/stock.html">年度币种库存报表</a></li>
                    <li><a href="../report/stock_detail.html">月度库存报表</a></li>
                    <li><a href="../report/compare_stock_use.html">币种月度最高库存对比表</a></li>
                    <li class="divider"></li>
                    <li><a href="../report/map.html">按网点库存使用量查询报表</a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </nav><!-- /navbar -->
        <div>
          <ol class="breadcrumb" style="margin-bottom: 5px;">
            <li><a href="#">报表管理</a></li>
            <li><a href="../base/org.html">按网点库存使用量查询报表</a></li>
          </ol>
          <ol class="breadcrumb" style="margin-bottom: 1px;">
            <div align="right" style="padding-bottom: 5px;">
              <table>
                <tr width="100%">
                  <td>
                    <div class="input-group date form_date col-md-12" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                      <input class="form-control" size="16" type="text" value="" readonly>
                      <span class="input-group-addon"></span>
                      <span class="input-group-addon" style="background-color:#bdc3c7"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                  </td><td>&nbsp;</td><td><button class="btn btn-embossed btn-primary">查询</button></td>
                </tr>
              </table>
            </div>
          </ol>
        </div>
      <pre class="prettyprint prettyprinted" style="padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: 0px;">
        <table style="width: 1150px;">
          <tr width="100%">
            <td width="50%">
                
                <canvas id="myChart4" width="550" height="400"></canvas>
                  
            </td>
            <td>

                <canvas id="myChart2" width="600" height="400"></canvas>

            </td>
          </tr>
          <tr>
            <td>

                  <canvas id="myChart1" width="550" height="400"></canvas>

            </td>
            <td>

                  <canvas id="myChart3" width="600" height="400"></canvas>

            </td>
          </tr>
        </table>
      </pre>
     
    </div>
    </div>
    <!-- /.container -->
    
    <footer class="footer">
    <div class="row footer-bottom">
      <ul class="list-inline text-center">
        <li><span> <a href="http://www.weirong.cn/">Copyright ©维融电子科技股份有限公司</a></span></li>
      </ul>
    </div>
    </footer>

    <!-- jQuery (necessary for Flat UI's JavaScript plugins) -->
    <script src="../../js/vendor/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="../../js/vendor/video.js"></script>
    <script src="../../js/flat-ui.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>
    <script src="https://cdn.bootcss.com/echarts/3.6.1/echarts.min.js"></script>
    <script src="../../js/china.js"></script>
  </body>
  <script type="text/javascript">
        
    // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('myChart4'));

        // 指定图表的配置项和数据
        var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series: [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'multiple',
                        label: {
                            normal: {
                                show: true
                            },
                            emphasis: {
                                show: true
                            }
                        },
                        data:[
                            {name:'广东', selected:true}
                        ]
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        //第二个
        var myChart2 = echarts.init(document.getElementById('myChart2'));

        // 指定图表的配置项和数据
        var option2 =  {
                          title : {
                              text: '2017年度xx网点外币使用量',
                              subtext: ''
                          },
                          tooltip : {
                              trigger: 'axis'
                          },
                          legend: {
                              data:['2011年']
                          },
                          toolbox: {
                              show : true,
                              feature : {
                                  mark : {show: true},
                                  dataView : {show: true, readOnly: false},
                                  magicType: {show: true, type: ['line', 'bar']},
                                  restore : {show: true},
                                  saveAsImage : {show: true}
                              }
                          },
                          calculable : true,
                          xAxis : [
                              {
                                  type : 'value',
                                  boundaryGap : [0, 0.01]
                              }
                          ],
                          yAxis : [
                              {
                                  type : 'category',
                                  data : ['美元','港元','日元','欧元','英镑','澳元']
                              }
                          ],
                          series : [
                              {
                                  name:'2011年',
                                  type:'bar',
                                  data:[18203, 23489, 29034, 104970, 131744, 630230]
                              }
                          ]
                      };

        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);


        //第三个
        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('myChart1'));

        // 指定图表的配置项和数据
        var option3 = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                legend: {
                    data:['美元','港元','欧元']
                },
                toolbox: {
                    show : true,
                    orient: 'vertical',
                    x: 'right',
                    y: 'center',
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'美元',
                        type:'bar',
                        stack: '使用量',
                        data:[120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name:'港元',
                        type:'bar',
                        stack: '使用量',
                        data:[220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name:'欧元',
                        type:'bar',
                        stack: '使用量',
                        data:[150, 232, 201, 154, 190, 330, 410]
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);

        //第四个
        var myChart4 = echarts.init(document.getElementById('myChart3'));

        // 指定图表的配置项和数据
        var option4 = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['美元','港元','日元','英镑','欧元']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'center',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius : ['50%', '70%'],
                        itemStyle : {
                            normal : {
                                label : {
                                    show : false
                                },
                                labelLine : {
                                    show : false
                                }
                            },
                            emphasis : {
                                label : {
                                    show : true,
                                    position : 'center',
                                    textStyle : {
                                        fontSize : '30',
                                        fontWeight : 'bold'
                                    }
                                }
                            }
                        },
                        data:[
                            {value:335, name:'美元'},
                            {value:310, name:'港元'},
                            {value:234, name:'日元'},
                            {value:135, name:'英镑'},
                            {value:1548, name:'欧元'}
                        ]
                    }
                ]
            };

        // 使用刚指定的配置项和数据显示图表。
        myChart4.setOption(option4);

        $('.form_date').datetimepicker({
          //language:  'fr',
          format: 'yyyy',
          weekStart: 1,
          todayBtn:  1,
          autoclose: 1,
          todayHighlight: 1,
          startView: 4,
          minView: 4,
          forceParse: 0
          });

  </script>
</html>